<template>
  <Layout style="height:100%"
          class="main">
    <Sider hide-trigger
           collapsible
           :width="200"
           :collapsed-width="64"
           v-model="collapsed"
           class="left-sider"
           :style="{overflow: 'hidden'}">
      <side-menu accordion
                 ref="sideMenu"
                 :active-name="$route.name"
                 :collapsed="collapsed"
                 @on-select="turnToPage"
                 :menu-list="menuList"
                 :id="type == 10 ? 'side_wrapper' : 'no_icon_side_wrapper'">
        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
        <div class="logo-con">
          <img v-show="!collapsed"
               :src="maxLogo"
               key="max-logo" />
          <img v-show="collapsed"
               :src="minLogo"
               key="min-logo" />
        </div>
      </side-menu>
    </Sider>
    <Layout>
      <Header class="header-con"
              style="height: 55px;line-height: 55px;">
        <div class="clearfix">
          <p style="float: left;font-size: 16px;color:#333;">{{this.$route.meta.title}}</p>
          <div style="float: right;margin-right: 20px;">
            <p style="float: left;font-size: 16px;color:#333;margin-right: 15px;">{{userName}}</p>
            <user :user-avator="userAvator" />
          </div>
        </div>
      </Header>
      <Layout class="main-layout-con">
        <Content class="content-wrapper" style="18px!important">
          <router-view :key="$route.fullPath"></router-view>
          <div class="pub_footer" v-if='0'>
            <p>萌宠</p>
            <p>版权所有：Copyright 萌宠 All Rights Reserved. 苏ICP备xxxxx号-1</p>
          </div>
        </Content>
      </Layout>
    </Layout>
  </Layout>
</template>
<script>
import SideMenu from './components/side-menu'
import HeaderBar from './components/header-bar'
import TagsNav from './components/tags-nav'
import User from './components/user'
import routers from '@/router/routers'
import Fullscreen from './components/fullscreen'
import Language from './components/language'
import { mapMutations, mapActions } from 'vuex'
import { getNewTagList, getNextRoute, routeEqual, getRoute } from '@/libs/util'
import {
  getAdminOpenid,
  unbindAdmin,
  getQRCode,
  getUnreadNoticeCount,
  getNoticeList,
  getUnreadMessageCount,
  getMessageList,
  readMessage
} from '@/api/main.js'
import minLogo from '@/assets/images/logo1.png'
import maxLogo from '@/assets/images/logo1.png'

import './main.less'

export default {
  name: 'Main',
  components: {
    SideMenu,
    HeaderBar,
    Language,
    TagsNav,
    Fullscreen,
    User
  },
  data () {
    return {
      ex_logo: '',
      ex_name: '',
      user_type: 1,
      collapsed: false,
      minLogo,
      maxLogo,
      isFullscreen: false,
      isBind: false,
      nickname: '',
      showReminder: false,
      imgName: '',
      type: '',
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      isShow: false,
      isShowBrand: false,
      brandList: [],
      brandName: ''
    }
  },
  computed: {
    tagNavList () {
      return this.$store.state.app.tagNavList
    },
    tagRouter () {
      return this.$store.state.app.tagRouter
    },
    userAvator () {
      return 'https://img.xuan-ling.cn/FjGgyF-3k6RwarPBjoSaj0L6Mua1.jpg'
    },
    userName () {
      return this.$store.state.user.userName
    },
    cacheList () {
      return this.tagNavList.length
        ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name)
        : []
    },
    menuList () {
      return this.$store.getters.menuList
    },
    local () {
      return this.$store.state.app.local
    },
  },
  filters: {
    filterName: function (val) {
      return val.substr(0, 1) + '*'
    }
  },
  methods: {
    toggle () {
      this.$set(this, 'isShow', !this.isShow)
    },
    toggleBrand () {
      this.$set(this, 'isShowBrand', !this.isShowBrand)
    },
    closeReminder () {
      this.showReminder = false
    },
    ...mapMutations(['setBreadCrumb', 'setTagNavList', 'addTag', 'setLocal']),
    ...mapActions(['handleLogin']),
    turnToPage (route) {
      let { name, params, query } = {}
      if (typeof route === 'string') name = route
      else {
        name = route.name
        params = route.params
        query = route.query
      }
      if (name.indexOf('isTurnByHref_') > -1) {
        window.open(name.split('_')[1])
        return
      }
      this.$router.push({
        name,
        params,
        query,
      })
    },
    handleCollapsedChange (state) {
      this.collapsed = state
    },
    handleCloseTag (res, type, route) {
      let user = JSON.parse(localStorage.getItem('user_admin'))
      if (this.tagNavList.length == 1 && route.name == user.first_access) {
        return false;
      }
      let openName = ''
      if (type === 'all') { //关闭所有
        
      } else if (routeEqual(this.$route, route)) {
        if (type === 'others') { //关闭其他
          openName = route.name
        } else {
          const nextRoute = getNextRoute(this.tagNavList, route)
          if (nextRoute != undefined) {
            this.$router.push(nextRoute)
            openName = nextRoute.name
          } else {
            this.turnToPage(user.first_access)
            openName = user.first_access
          }
        }
      }
      this.setTagNavList(res)
      this.$refs.sideMenu.updateOpenName(openName)
    },
    handleClick (item) {
      if (item.path) {
        this.$router.push({
          path: item.path
        });
        return;
      }
    }
  },
  watch: {
    $route (newRoute) {
      this.setBreadCrumb(newRoute.matched);
    }
  },
  beforeDestroy () {
    window.removeEventListener('click', () => {
    }, true)
  },
  mounted () {
    // console.log(this.$store.state)
    document.addEventListener('click', (e) => {
      if (e.target.className != 'ex_name' && e.target.className != 'ex_logo' && e.target.className != 'arrow') {
        this.isShow = false
      }
    }, true);
    document.addEventListener('click', (e) => {
      if (e.target.className != 'ex_name1' && e.target.className != 'arrow1') {
        this.isShowBrand = false
      }
    }, true);
    this.user_type = localStorage.getItem('user_type')

    /**
     * @description 初始化设置面包屑导航和标签导航
     */
    // 设置初始语言
    this.setLocal(this.$i18n.locale)
  },
}
</script>
<style lang="less" scoped>
.class1 {
	-webkit-transform-origin: center;
	transform-origin: center;
	-webkit-transform: rotate3d(0, 0, 1, 180deg);
	transform: rotate3d(0, 0, 1, 180deg);
	transition: 0.3s ease;
}

.class2 {
	-webkit-transform-origin: center;
	transform-origin: center;
	transition: 0.3s ease;
}

.notice_modal {
	/deep/ .ivu-modal-body {
		padding: 18px 40px;
	}
}

/deep/ .ivu-timeline-item-head-blue {
	border-color: #eeeeee;
}

/deep/ .ivu-timeline-item-head {
	background: #eeeeee;
}

/deep/ .ivu-timeline-item-content {
	font-size: 14px;
	color: #333;
	box-shadow: 0 0 8px rgba(226, 226, 226, 0.5);
	margin-left: 36px;
}

/deep/ .ivu-timeline-item {
	padding: 0 0 25px 0;
}

.show_reminder {
	/deep/ .ivu-modal {
		top: 250px;
	}

	/deep/ .ivu-modal-footer {
		display: none;
	}

	/deep/ .ivu-modal-header {
		background: #f3f4f5;
		text-align: center;
		color: #333;
		font-size: 18px;
		height: 65px;
		line-height: 65px;
		padding: 0;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;

		.ivu-modal-header-inner {
			font-size: 18px;
			height: 65px;
			line-height: 65px;
		}
	}

	/deep/ .ivu-modal-content {
		border-radius: 15px;
	}

	/deep/ .ivu-modal-body {
		.reminder_tip {
			color: #333;
			font-size: 15px;
			width: 279px;
			line-height: 28px;
			margin: 15px auto 40px auto;
		}

		.reminder_btm {
			text-align: center;
			margin-bottom: 5px;

			.ivu-btn {
				width: 119px;
				height: 40px;
				font-size: 15px;

				&:nth-of-type(1) {
					margin-right: 39px;
				}
			}
		}
	}
}

.dy-wrapper {
	position: absolute;
	z-index: 50;
	width: 198px;
	height: 250px;
	background: #fff;
	box-shadow: #e8e8e8 0 0 18px;
	top: 70px;
	right: 67px;
	border-radius: 5px;
	text-align: center;
	visibility: hidden;
	opacity: 0;
	transform: rotateY(50deg);
	-ms-transform: rotateY(50deg);
	-moz-transform: rotateY(50deg);
	-webkit-transform: rotateY(50deg);
	-o-transform: rotateY(50deg);
	transition: 0.5s ease;
	-webkit-transition: 0.5s ease;

	&:after {
		position: absolute;
		content: '';
		left: 35px;
		top: -9px;
		border-bottom: 9px solid #fff;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
	}

	.dy-concern {
		color: #333333;
		font-size: 16px;
		font-weight: bolder;
		margin-top: 12px;
	}

	small {
		color: #9a9a9a;
		font-size: 14px;
		display: block;
		margin-top: -28px;
	}

	img {
		display: block;
		margin: 0 auto;
		margin-top: -4px;
		margin-bottom: 4px;
	}

	.dy-jb {
		display: block;
		margin-top: -14px;
		color: #9a9a9a;
		font-size: 12px;

		span {
			color: #4087ff;
		}
	}
}
</style>
<style lang="less">
.pub_footer {
	background: #f5f7fa;
	padding: 25px 0 0;
	position: relative;

	p {
		&:nth-of-type(1) {
			color: #999;
			font-size: 15px;
			padding-top: 15px;
			position: absolute;
			top: 8px;
			left: 50%;
			transform: translateX(-50%);

			&:before {
				position: absolute;
				left: -84px;
				width: 60px;
				top: 25px;
				display: block;
				content: '';
				height: 1px;
				background: #c5c5c5;
			}

			&:after {
				position: absolute;
				right: -84px;
				width: 60px;
				top: 25px;
				display: block;
				content: '';
				height: 1px;
				background: #c5c5c5;
			}
		}

		&:nth-of-type(2) {
			text-align: center;
			color: rgb(153, 153, 153);
			font-size: 14px;
			padding-top: 30px;
		}
	}
}
</style>
